<template>
  <div
    id="signalingLineChart"
    style="height: 100%;"
  />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'ControlSignaling',

  watch: {
    orderCount () {
      this.createSignalingLineChart()
    }
  },

  props: {
    orderCount: {
      type: Array,
      default () {
        return []
      }
    }
  },

  data () {
    return {
      signalingLineChart: null
      // order_count: 0
    }
  },

  mounted () {
    let self = this
    self.$nextTick(async () => {
      // await self.$store.dispatch('getCtrlCount')
      self.createSignalingLineChart()
      // setInterval(() => {
      //   self.$store.commit('pushCtrlCount', {
      //     order_count: self.order_count
      //   })
      //   self.order_count++
      // }, 1000)
    })
  },

  methods: {
    createSignalingLineChart () {
      let self = this
      if (self.signalingLineChart === null) {
        self.signalingLineChart = echarts.init(document.getElementById('signalingLineChart'))
      }
      let notMerge = true
      self.signalingLineChart.setOption({
        legend: {
          show: false,
          top: 0,
          right: 0
          // orient: 'vertical'
        },
        tooltip: {
          show: true,
          confine: true,
          // 控制信令数量：
          formatter: `${self.$t('message.home.controlChannelSignaling.tooltip')}：{c}`
        },
        grid: {
          top: 5,
          bottom: 20,
          left: 20,
          right: 0,
          containLabel: false
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLabel: {
            show: true
          },
          max: 'dataMax'
        },
        series: [
          {
            name: 'order_count',
            type: 'line',
            data: self.orderCount,
            itemStyle: {
              color: '#bc5d08'
            }
          }
        ]
      }, notMerge)
    }
  }
}
</script>

<style scoped>
</style>
